<template>
  <div class="sortmanage">
    <div v-if="close" class="guanbi" @click="guanbiClick">
      <img :src="img.guanbi" alt="" srcset="" />
    </div>
    <amendsort
      :parId="parId"
      :amendsortit="amendsorttit"
      :amendsortlist="amendsortlist"
      @childcancelClick="amendsortclosebox"
      @childokclic="amendsortsubmitbox"
      v-if="amendsortdiv"
    />
    <div class="sortmanage_div" v-for="(v, i) in sortmanagelist" :key="i">
      <div class="sortmanage_tit">{{ v.tit }}</div>
      <div class="sortmanage_list">
        <ul :ref="`sortmanage${i}`">
          <li
            v-for="(v1, i1) in v.list"
            :key="i1"
            @click="sortmanagelistclick(i, v1.dataId, i1)"
            :style="{ background: v1.select ? '#cac9c9d3' : '' }"
          >
            {{ v1.title }}
          </li>
        </ul>
      </div>
      <div class="sortmanage_bottom" @click="sortmanagebottomclick(i)">
        {{ v.buttontext }}
      </div>
    </div>
  </div>
</template>
<script>
import mixin from "@/utils/mixin";
import amendsort from "@/components/compilecen/amendsort";
import { getBaseList } from "@/api/user";

export default {
  mixins: [mixin],
  components: { amendsort },
  props: ["close", "sortmanagetext", "parentId"],

  data() {
    return {
      amendsorttit: "",
      amendsortdiv: false,
      amendsortlist: "",
      //记录是那个被修改
      amendsortlistalter: "",
      sortmanagelist: null,
      parId: 0,
      parindex: null,
      index1: null,
    };
  },
  watch: {
    parentId(val) {
      this.parindex = this.sortmanagelist.findIndex((v1) => v1.dataId == val);
    },
    sortmanagetext: {
      deep: true, //开启深度监听
      handler(v) {
        this.sortmanagelist = JSON.parse(JSON.stringify(v));
        this.sortmanagelist[0].list.forEach((v) => {
          v.select = false;
        });
        this.sortmanagelist[0].list[this.index1].select = true;
      },
    },
  },
  methods: {
    //列表点击
    async baseListVal(id) {
      this.parId = id;
      let info = await getBaseList({ parentId: id, dataType: 1 });
      this.sortmanagelist[1].list = [];
      if (info.data.data) {
        info.data.data.forEach((v) => {
          v.select = false;
          this.sortmanagelist[1].list.push(v);
        });
      }
    },
    sortmanagelistclick(i, id, i1) {
      if (i == 0) {
        this.baseListVal(id);
        this.sortmanagelist[0].list.forEach((v) => (v.select = false));
        this.sortmanagelist[0].list[i1].select = true;
        this.index1 = i1;
      }
    },
    //add按钮点击
    sortmanagebottomclick(i) {
      this.amendsortlistalter = i;
      this.amendsorttit = this.sortmanagelist[i].buttontext;
      let list = this.sortmanagelist.filter((v, index, selfList) => {
        if (index == i) return selfList[index];
      });
      let amendsortlist = JSON.parse(JSON.stringify(list[0].list));
      this.amendsortlist = amendsortlist;
      this.amendsortdiv = true;
      this.$emit("childByValue", true);
    },
    amendsortclosebox(value) {
      this.amendsortdiv = value; //蒙版
      this.$emit("childByValue", value);
    },
    amendsortsubmitbox() {
      this.$emit("submitbox", this.parId);
    },
    guanbiClick() {
      this.$emit("guanbiByValue", false);
    },
  },
  mounted() {
    this.sortmanagelist = JSON.parse(JSON.stringify(this.sortmanagetext));
    this.sortmanagelist[0].list[0].select = true;
    this.parId = this.parentId;
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.sortmanage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10000;
  width: 650px;
  height: 450px;
  background: #fff;
  border-radius: @radius1;
  box-shadow: @shadow;
  color: @color2;
  padding: 56px 50px;
  .divAJ();
  .guanbi {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
  }
  .sortmanage_div {
    width: 30%;
    height: 100%;
    .sortmanage_tit {
      padding-right: 4px;
      margin: 0 0 10px 18px;
      font-weight: bold;
      font-size: 14px;
    }
    .sortmanage_list {
      width: 100%;
      height: 60%;
      margin-bottom: 30px;
      padding: 16px 4px 16px 8px;
      background: @color4;
      border: 1px solid @color3;
      border-radius: @radius2;
      & > ul {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        li {
          width: 70%;
          height: 32px;
          padding-left: 4px;
          line-height: 32px;
          border-radius: @radius2;
          background: #f6f6f6;
          cursor: pointer;
          &:hover {
            background-color: #e6e6e6;
          }
        }
      }
    }
    .sortmanage_bottom {
      width: 100%;
      height: 30px;
      background: @color2;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      .cen();
    }
  }
}
.guanb {
  background: rgb(111, 103, 103);
}
</style>